Webpack初探：Import和Require的使用

前言：本文由编程笔记小编整理，旨在介绍 Webpack 中 Import 和 Require 的相关知识，希望对您有所帮助。

在过去，Javascript 文件通常按功能划分，并在 HTML 页面中通过 script 标签引入。这种方法要求开发者手动管理文件的引入顺序，确保依赖关系正确。随着前端工程的发展，模块化概念逐渐普及，使得前端开发更加规范和高效。

1. Export

每个 Javascript 文件可以视为一个模块，该模块可以被其他模块引入。引入后的结果是对该模块的执行结果进行封装。然而，模块内部的私有变量和函数不会自动暴露给外部，因此需要使用 export 关键字来决定模块对外公开的内容。

export 用于从模块中导出函数、对象或原始值，以便其他模块通过 import 语句使用这些内容。

例如，在 module1.js 中：

function fun1() {
    console.log('module - 1 : function 1');
}
let person = {
    name: '张三'
};
let str = '我是module1定义的字符串';
export { fun1, person, str };

在 main.js 中引入并使用这些导出的内容：

import * as module1 from './module1.js';
console.log(module1);

此时，module1 对象包含了 fun1、person 和 str，可以通过 module1 访问这些内容。

export 导出的内容会被添加到模块对象中，可以理解为深拷贝。

2. Export Default

初学者可能会疑惑，已经有了 export 为什么还需要 export default？实际上，export default 是为了提供一个默认的导出接口。

修改 module1.js：

function f1() {
    console.log('module - 1 : function 1');
}
let b = {
    name: 'test_obj'
};
let str = 'hello';
export { f1, b, str };
export default {
    name: 'default'
};

export default 的作用是给模块对象添加一个 default 属性，该属性的值是一个对象，与 export default 导出的内容完全一致。

3. 文件导出总结

一个 Javascript 文件被当作模块引入时，会暴露为一个对象。export 用于在该对象中添加属性，export default 用于设置对象的 default 属性。

4.1 导出整个文件对象

使用 import * 语法可以导入模块的所有接口，并通过 as 指定一个命名空间对象。例如：

import * as m1 from './m1.js';
console.log(m1);

m1 命名空间对象可以访问模块的所有对外接口，包括 export 和 export default 的内容。

4.2 导出部分接口

在实际开发中，我们可能只需要导入模块的部分接口。通过在 import 语句中解构模块对象，可以实现这一点：

import { f1, b } from './m1.js';
console.log(f1);
console.log(b);

注意，默认导出的接口无法通过这种方式直接解构，因为 default 是关键字，不能作为变量名使用。

4.3 导入默认接口

默认导出的接口可以通过 import 语句直接导入，例如：

import d from './m1.js';
console.log(d);

此时，d 就是模块对象的 default 属性值，即 export default 导出的内容。

5. 动态导入

import 不仅是一个关键字，还是一个函数，可以异步加载模块。函数的参数是模块路径，返回一个 Promise 对象：

import('./m1.js').then(m => {
  console.log('then:', m);
});

在 then 回调中，m 是模块的整个对象，包括 export 和 export default 的内容。

6. 仅作为副作用导入

import 还可以仅执行模块中的代码，而不导入任何接口。例如，在 Vue 项目中，我们可以在 init.js 文件中编写初始化逻辑，然后在 main.js 中直接引入：

import './lib/init.js';

这样做可以保持 main.js 文件的简洁，同时实现模块化管理。